<template>
  <div>
    <van-nav-bar title="快递员认证" left-arrow @click-left="goback"/>
    <div>
      <div class="kdyrz-dier">
        <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="所属公司"
            placeholder="请选择"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
      </div>
      <div class="fanmian" v-if="!(work.workCardImage.length > 0)">
        <div class="fan">
          <van-uploader :after-read="afterRead1"/>
        </div>
        <div class="fan-zi">工牌或名牌照片</div>
      </div>
      <div v-if="work.workCardImage.length > 0">
        <van-image  :src="work.workCardImage"/>
      </div>
      <div class="zheng-ti">
        <van-button type="primary" size="large" @click="onSubmit">提交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "CourierCertification",
  data() {
    return {
      login: JSON.parse(localStorage.getItem('login')),
      work:{
        workCardImage:'',
        postCompany:'360配送',
        pid:''
      } ,
      value: '',
      columns: ['360配送', '小墨配送', '申通', '邮政', '中通'],
      showPicker: false,
    }
  } ,
  created() {

  } ,
  methods: {
    onConfirm(value) {
      this.value = value;
      this.work.postCompany = value;
      this.showPicker = false;
    },
    goback() {
      this.$router.go(-1);
    },
    afterRead1(file) {
      axios.post('http://localhost:11219/file/upload', file, {headers: {'Content-Type': 'multipart/form-data'}})
          .then(response => {
            this.work.workCardImage = response.data.data.url;
          })
    } ,
    onSubmit(){
      this.work.pid=this.login.registerIp;
      axios.post('http://localhost:11219/express/expressdetial/user/realName', this.work).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$toast('等待审核');
          this.$router.push('/certification')
        } else {

        }
      })
    },
  }
}
</script>
<style scoped>
.kdyrz-dier{
  width: 100%;
  height: 60px;
  float: left;
  margin-top: 30px;
  background-color: white;

}
.kdyrz-suo {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}
.jin-suo {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  color: darkgray;
}




.fanmian {
  width: 100%;
  height: 170px;
  float: left;
  margin-top: 20px;
  background-color: white;
}

.fan {
  float: left;
  margin-top: 30px;
  margin-left: 150px;
}

.fan-zi {
  float: left;
  margin-top: 5px;
  margin-left: 140px;
}

.zheng-ti {
  width: 300px;
  height: 50px;
  float: left;
  margin-top: 30px;
  margin-left: 40px;
  background-color: cornflowerblue;
  /*设置边框圆角 */
  border-radius: 20px;

}
</style>